<template>
    <div>
        <div class="login-title">登录到EPlus-Admin</div>
        <div v-if="login">
            <div class="sub-title">
                <span class="login-title-1">没有账号吗？</span>
                <span class="login-title-2" @click="toggleForm()">注册新账号</span>
            </div>
            <el-form ref="adminLoginForm" size="default" v-model="loginModel" :rules="loginRules">
                <el-form-item prop="account">
                    <el-input placeholder="请输入账号" :prefix-icon="Avatar" clearable v-model="loginModel.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" :prefix-icon="Lock" clearable show-password v-model="loginModel.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-col :span="18">
                        <el-checkbox v-model="loginModel.rememberMe" label="记住账号" />
                    </el-col>
                    <el-col :span="6" class="second-col">
                        <span class="login-title-1">忘记密码？</span>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Right" type="primary">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        
        <div v-if="register">
            <div class="sub-title">
                <span class="login-title-1">已有账号？</span>
                <span class="login-title-2" @click="toggleForm()">登录</span>
            </div>
            <el-form ref="adminRegisterForm" size="default" v-model="registerModel" :rules="registerRules">
                <el-form-item prop="account">
                    <el-input placeholder="请输入账号" :prefix-icon="Avatar" clearable v-model="registerModel.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" :prefix-icon="Lock" clearable show-password v-model="registerModel.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="cellPhoneNo">
                    <el-input placeholder="请输入手机号" :prefix-icon="Cellphone" clearable v-model="registerModel.cellPhoneNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="captchaCode">
                    <el-col :span="20">
                        <el-input placeholder="请输入验证码" :prefix-icon="Notification" v-model="registerModel.captchaCode" clearable></el-input>
                    </el-col>
                    <el-col :span="4" class="second-col">
                        <el-button>发送验证码</el-button>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-col :span="18">
                        <el-checkbox v-model="registerModel.read" label="我已阅读并同意" />
                    </el-col>
                    <el-col :span="6" class="second-col">
                        <span class="login-title-1">EPlus-Admin<router-link to="/about" class="link">服务协议</router-link>和EPlus-Admin<router-link to="/about" class="link">隐私声明</router-link>
                        </span>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Right" type="primary">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { reactive, onMounted, ref, onBeforeMount, defineAsyncComponent, getCurrentInstance, resolveDynamicComponent } from 'vue'
    import {
        Avatar,
        Lock,
        Right,
        Cellphone,
        Notification
    } from '@element-plus/icons-vue'

    const login = ref(true);
    const register = ref(false);

    const loginModel = reactive({
        account: '',
        password: '',
        rememberMe: false
    });

    const registerModel = reactive({
        account: '',
        password: '',
        cellPhoneNo: '',
        captchaCode: '',
        read: false
    });

    const toggleForm = () => {
        login.value = !login.value;
        register.value = !register.value;
    }

    const loginRules = reactive({
        account: [
            {
                required: true,
                message: '请输入账号',
                trigger: 'blur'
            }
        ],
        password: [
            {
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }
        ]
    });

    const registerRules = reactive({
        account: [
            {
                required: true,
                message: '请输入账号',
                trigger: 'blur'
            }
        ],
        password: [
            {
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }
        ],
        cellPhoneNo: [
            {
                required: true,
                message: '请输入手机号',
                trigger: 'blur'
            }
        ],
        captchaCode: [
            {
                required: true,
                message: '请输入验证码',
                trigger: 'blur'
            }
        ]
    });
</script>

<style>
.login-title {
    font-size: 36px;
    margin-bottom: 10px;
}

.sub-title {
    margin-bottom: 50px;
}

.login-title-1 {
    color:#666666;
    font-size: 14px;
}

.login-title-2 {
    font-size: 14px;
    cursor: pointer;
}

.second-col {
    display:flex; justify-content: flex-end;
}

.link {
    text-decoration: none;
    color: #409EFF;
}
</style>